﻿@* 供应商管理 *@
@{
    ViewData["Title"] = "供应商管理";
}

<script src="~/js/vue.min.js"></script>
<link href="~/css/index.css" rel="stylesheet" />
<script src="~/js/index.js"></script>

<div id="app">
    <!-- 1. 搜索区域 -->
    <div class="search-form">
        <el-form :inline="true" :model="searchParams">
            <el-form-item label="供应商">
                <el-input v-model="searchParams.supplierName" placeholder="请输入供应商名称/编号"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchParams.status" placeholder="请选择">
                    <el-option label="启用" value="启用"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属行业">
                <el-select v-model="searchParams.industry" placeholder="请选择">
                    <el-option label="零售" value="零售"></el-option>
                    <el-option label="制造" value="制造"></el-option>
                    <el-option label="制药厂" value="制药厂"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="进货负责人">
                <el-input v-model="searchParams.purchasePerson" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click ="handleQuery">查询</el-button>
                <el-button v-on:click ="handleReset">重置</el-button>
                <el-button type="text" v-on:click ="showAdvancedSearch">高级搜索</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 2. 操作按钮区域 -->
    <div class="operation-buttons">
        <el-button type="primary" v-on:click ="handleAdd">新增</el-button>
        <el-button v-on:click ="handleDelete">删除</el-button>
        <el-button v-on:click ="handleCopy">复制</el-button>
        <el-button v-on:click ="handleExport">导出</el-button>
        <el-button v-on:click ="handleImport">导入</el-button>
        <el-button v-on:click ="handleRefresh">刷新</el-button>
    </div>

    <!-- 3. 表格区域（展示供应商数据） -->
    <el-table :data="supplierList" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="index" label="#" width="50"></el-table-column>
        <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <el-table-column prop="industry" label="所属行业"></el-table-column>
        <el-table-column prop="supplierCategory" label="供应商分类"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="email" label="电子邮箱"></el-table-column>
        <el-table-column prop="purchaseDept" label="进货部门"></el-table-column>
        <el-table-column prop="purchasePerson" label="进货负责人"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="address" label="供应商地址"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" v-on:click ="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" v-on:click ="handleRemove(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 4. 分页区域 -->
    <el-pagination v-on:size-change ="handleSizeChange"
    v-on:current-change ="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 高级搜索弹窗（可选，根据需求扩展） -->
    <el-dialog title="高级搜索" :visible.sync="advancedSearchVisible" width="50%">
        <el-button v-on:click ="advancedSearchVisible = false">确定</el-button>
    </el-dialog>
</div>

<script>
    // 关键步骤：注册 Element UI 到 Vue 中（必须在 new Vue 前执行）
    Vue.use(ElementUI);

    new Vue({
      el: '#app',
      data: {
        supplierList: [
          // 模拟数据（实际需从后端接口获取）
          { index: 1, supplierCode: 'GYSDH4345', supplierName: '供应商一', industry: '零售', supplierCategory: '成品供应商', contact: '李依依', phone: '13808989543', email: 'cwb@tom.com', purchaseDept: '采购一部门', purchasePerson: '李依依', status: '启用', address: '河南省三门峡市卢氏县文化' },
          { index: 2, supplierCode: 'GYSDH4345', supplierName: '供应商二', industry: '制造', supplierCategory: '成品供应商', contact: '李依依', phone: '13808989543', email: 'cwb@tom.com', purchaseDept: '采购一部门', purchasePerson: '李依依', status: '启用', address: '河南省三门峡市卢氏县文化' },
          // 可继续添加更多模拟数据...
        ],
        searchParams: {
          supplierName: '',
          status: '',
          industry: '',
          purchasePerson: ''
        },
        total: 100, // 总条数（实际从后端返回）
        pageSize: 10, // 每页条数
        currentPage: 1, // 当前页码
        advancedSearchVisible: false // 高级搜索弹窗显隐
      },
      methods: {
        // 查询供应商列表
        handleQuery() {
          console.log('查询参数：', this.searchParams);
          // 实际开发：调用后端接口（如 axios），示例：
          // axios.get('/api/supplier/list', { params: this.searchParams })
          //   .then(res => {
          //     this.supplierList = res.data.list;
          //     this.total = res.data.total;
          //   });
        },
        // 重置查询条件
        handleReset() {
          this.searchParams = {
            supplierName: '',
            status: '',
            industry: '',
            purchasePerson: ''
          };
          this.handleQuery(); // 重置后重新查询
        },
        // 显示高级搜索弹窗
        showAdvancedSearch() {
          this.advancedSearchVisible = true;
        },
        // 新增供应商
        handleAdd() {
          console.log('触发“新增供应商”逻辑');
          // 实际开发：打开新增弹窗或跳转页面
        },
        // 批量删除供应商（需结合表格选中行）
        handleDelete() {
          console.log('触发“批量删除供应商”逻辑');
        },
        // 复制供应商
        handleCopy() {
          console.log('触发“复制供应商”逻辑');
        },
        // 导出供应商数据
        handleExport() {
          console.log('触发“导出供应商”逻辑');
        },
        // 导入供应商数据
        handleImport() {
          console.log('触发“导入供应商”逻辑');
        },
        // 刷新列表
        handleRefresh() {
          this.handleQuery(); // 刷新即重新查询
        },
        // 编辑单条供应商
        handleEdit(row) {
          console.log('编辑供应商：', row);
          // 实际开发：打开编辑弹窗回显数据
        },
        // 删除单条供应商
        handleRemove(row) {
          console.log('删除供应商：', row);
          // 实际开发：调用后端删除接口 + 刷新列表
        },
        // 每页条数变化
        handleSizeChange(val) {
          this.pageSize = val;
          this.handleQuery(); // 页码大小变化后重新查询
        },
        // 当前页码变化
        handleCurrentChange(val) {
          this.currentPage = val;
          this.handleQuery(); // 页码变化后重新查询
        }
      },
      mounted() {
        this.handleQuery(); // 页面加载时初始化查询数据
      }
    })
</script>

<style>
    /* 简单样式调整，可根据项目需求扩展 */
    .search-form, .operation-buttons {
        margin-bottom: 16px;
    }
</style>